<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_react生命周期(旧)</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">

        /* 
            1.初始化阶段: 由ReactDOM.render()触发---初次渲染
                            1.  constructor() // 构造器
                            2.  componentWillMount() // 
                            3.  render()
                            4.  componentDidMount() =====> 常用
                                                一般在这个勾子中做一些初始化的事，例如：定时器、发送网络请求、订阅消息
            2.更新阶段: 由组件内部this.setState()或父组件render触发
                            1.  shouldComponentUpdate()
                            2.  componentWillUpdate()
                            3.  render() =====> 必须使用的一个
                            4.  componentDidUpdate()
            3.卸载组件: 由React.unmountComponentAtNode()触发
                            1.  componentWillUnmount()  =====>  常用
                                                        一般在这个勾子中做一些收尾的事， 例如：关闭定时器、取消订阅消息
        */
        
        class Count extends React.Component{
            constructor(props) {
                console.log('Count---constructor');
                super(props)
                this.state = {count: 0}
            }
            add = (e) => {
                let {count} = this.state
                this.setState({count: count + 1})
            }

            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }

            force = () => {
                this.forceUpdate()
            }

            // 组件将要挂载的钩子
            componentWillMount(){
                console.log('Count---componentWillMount');
            }

            // 组件挂载完毕钩子
            componentDidMount(){
                console.log('Count---componentDidMount');
            }

            // 组件将要卸载的钩子
            componentWillUnmount(){
                console.log('Count---componentWillUnmount');
            }

            // 控制组件更新的 “阀门”
            shouldComponentUpdate(){
                console.log('Count---shouldComponentUpdate');
                return true
            }
            

            // 组件将要更新的钩子
            componentWillUpdate(){
                console.log('Count---componentWillUpdate');
            }

            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log('Count---componentDidUpdate');
            }

            render(){
                console.log('Count---render');
                return (
                    <div>
                        <h2>当前求和为：{this.state.count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
        }

        class A extends React.Component{
            state = {carName: '奔驰'}

            changeCar = () => {
                this.setState({carName: '奥拓'})
            }

            render(){
                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}/>
                    </div>
                )
            }
        }

        class B extends React.Component{

            // 组件将要接收新的Props的钩子
            componentWillReceiveProps(props){
                console.log("B-------------componentWillReceiveProps", props);
            }

            // 控制组件更新的 “阀门”
            shouldComponentUpdate(){
                console.log("B-------------componentWillReceiveProps");
                return true
            }

            // 组件将要更新的钩子
            componentWillUpdate(){
                console.log("B-------------componentWillUpdate");
            }

            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log("B-------------componentWillUpdate");
            }
            render(){
                return (
                    <div>我是B组件，接收到的车是:{this.props.carName}</div>
                )
            }
        }
        ReactDOM.render(<Count />, document.getElementById('test'))
	</script>
</body>
</html>